<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        h2 {
            margin: 0;
        }

        #wrap {
            margin: 30px auto;
            width: 482px;
            padding: 5px;
            position: relative;
            border: 1px solid #000;
            background: #eee;
        }

        .title {
            font: bold 18px/40px "宋体";
            text-align: center;
            border-bottom: 1px solid #000;
        }

        #list {
            padding-left: 2px;
        }

        #list li {
            display: flex;
            opacity: 0.8;
            font: 14px/36px "宋体";
            border-bottom: 1px solid #000;
        }

        #list li a {
            padding: 0 20px;
        }

        #list li:hover {
            opacity: 1;
        }

        #list label input {
            margin: 0 20px 0 30px;
        }

        input[type="chekbox"] {
            width: 20px;
            height: 20px;
        }

        .footer {
            font: 16px/36px "宋体";
        }

       
    </style>
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        var data = [
            {
                id: 0,
                title: "残酷月光 - 费启鸣",
                checked: false,
                collect: false
            }, {
                id: 1,
                title: "兄弟 - 艾热",
                checked: false,
                collect: false
            }, {
                id: 2,
                title: "毕生 - 夏增祥",
                checked: false,
                collect: true
            }, {
                id: 3,
                title: "公子向北去 - 李春花",
                checked: true,
                collect: false
            }, {
                id: 4,
                title: "战场 - 沙漠五子",
                checked: false,
                collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];

        // -----------------------------------------------------------------------------------
        // 根据数据判断是否勾选全选
        let isAll = data => data.every(item => item.checked);

        function str (data){
            data.erery(item => item.checked)
        }

        // 根据数据渲染视图
        function renderDom(data) {
            // 获取dom元素
            var listEl = document.querySelector('#list');
            listEl.innerHTML = '';
            // 根据数据循环创建元素添加到dom视图
            data.forEach((item, index) => {
                var liEl = document.createElement('li');
                liEl.innerHTML = `
                    <input type="checkbox"  ${item.checked ? 'checked' : ''} />
                    <span>${item.title}</span>
                    ${item.collect? '<a href="javascript:;" class="collect">收藏</a>' : '<a href="javascript:;" class="cancelCollect">取消收藏</a>'}
                    <a href="javascript:;" class="remove">删除</a>
                `;
                // 使用事件委派实现收藏 取消收藏 删除功能
                liEl.onclick = function(e){
                    // 点击收藏按钮
                    var flag = data[index].collect;
                    if (e.target.classList.contains('collect')){
                        data[index].collect = !data[index].collect ;
                        renderDom(data);
                    }
                    // 点击取消收藏按钮
                    if (e.target.classList.contains("cancelCollect")){
                        data[index].collect = !data[index].collect ;
                        renderDom(data);
                    }
                    // 点击删除按钮
                    if (e.target.classList.contains('remove')){
                        data.splice(index,1);
                        document.querySelector("#checkAll").checked =data.length && isAll(data);
                        renderDom(data);
                    }
                    // 点击按钮框判断是否勾选底部 全选 渲染视图
                    if (e.target.nodeName === 'INPUT'){
                        // 两种方法 改变data里面的数据
                        // data[index].checked = !data[index].checked;
                        data[index].checked = e.target.checked;
                        document.querySelector("#checkAll").checked =data.length && isAll(data);
                    }

                }

                listEl.appendChild(liEl);
            })
        }
        renderDom(data);

        // 点击底部全选按钮勾选所有input框
        document.querySelector('#checkAll').onclick = function (){
            data.forEach(item => {
                item.checked = this.checked;
            })
            renderDom(data); 
        }

        // 点击删除按钮 删除对应数据 渲染视图
        document.querySelector('#remove').onclick = function(){
            data = data.filter(item => !item.checked);
            document.querySelector("#checkAll").checked =data.length && isAll(data);
            renderDom(data);
        }

        // 点击添加按钮
        // 点击按钮或按下Enter键添加数据
        let newInfo = document.querySelector('#newInfo');
        newInfo.addEventListener('keyup', e => {
            let keyNum = e.keyCode;
            if (keyNum === 13) {
                let newVal = newInfo.value;
                if (!newVal.trim()) {
                    alert('请输入内容');
                    return;
                }
                data.unshift({
                    id : data.length,
                    title: newVal,
                    checked: false,
                    collect: false
                })
                newInfo.value = '';
            }
            renderDom(data);
        })

        let addEl = document.querySelector('#add');
        addEl.addEventListener('click', () => {
            let newVal = newInfo.value;
            if (!newVal.trim()) {
                alert('请输入内容');
                return;
            }
            data.unshift({
                id : data.length,
                title: newVal,
                checked: false,
                collect: false
            })
            newInfo.value = '';
            renderDom(data);
        })

    </script>
</body>

</html>